<template>
  <div class="feature-version__container">
    <div class="table-panel">
      <resource-table
        ref="refResourceTable"
        v-loading="ifLoading"
        :table-columns="tableColumns"
        :showSelection="false"
        operations="edit,delete"
        :operation-column-width="90"
        @queryTable="getList"
      >
        <template #headerLeft>
          <div class="btn-list">
            <div class="btn-item btn-add" style="width: 100px">
              <el-button v-waves type="primary" style="width: 100px" @click="handlerAddNew">
                新增
              </el-button>
            </div>
          </div>
        </template>
        <template #headerRight="props">
          <div class="filter-conditions">
            <div class="filter-item" style="margin-left: 10px">
              图层名称：
              <el-input
                v-model="props.queryParameters.layerName"
                size="small"
                style="width: 160px"
                placeholder="请输入图层名称"
                clearable
                @clear="handlerClear"
              >
              </el-input>
            </div>
            <!-- <div class="filter-item" style="margin-left: 10px">
              图层年份：
              <el-date-picker
                v-model="props.queryParameters.layerYear"
                type="year"
                value-format="yyyy"
                placeholder="选择图层年份"
                size="small"
                style="width: 140px"
              >
              </el-date-picker>
            </div> -->
            <div class="filter-item" style="margin-left: 10px">
              业务分组：
              <el-select
                v-model="props.queryParameters.businessType"
                size="small"
                style="width: 140px"
                placeholder="请输入业务分组"
                clearable
                @clear="handlerClear"
              >
                <el-option
                  v-for="item in businessTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="filter-item" style="margin-left: 10px">
              要素名称：
              <el-select
                v-model="props.queryParameters.featureName"
                size="small"
                style="width: 140px"
                placeholder="请输入要素名称"
                clearable
                @clear="handlerClear"
              >
                <el-option
                  v-for="item in featureNameOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="filter-item" style="margin-left: 10px">
              要素版本：
              <el-select
                v-model="props.queryParameters.featureVersion"
                size="small"
                style="width: 140px"
                placeholder="请输入要素版本"
                clearable
                @clear="handlerClear"
              >
                <el-option
                  v-for="item in featureVersionOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="filter-item" style="margin-left: 10px">
              数据库：
              <el-select
                v-model="props.queryParameters.database"
                size="small"
                style="width: 130px"
                placeholder="请选择数据库"
                clearable
                @clear="handlerClear"
              >
                <el-option
                  v-for="item in databaseOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="filter-item" style="margin-left: 10px">
              图层迭代：
              <el-select
                v-model="props.queryParameters.dataLayerHistory"
                size="small"
                style="width: 140px"
                placeholder="请选择图层代"
                clearable
                @clear="handlerClear"
              >
                <el-option
                  v-for="item in dataLayerHistoryOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <!-- <div class="filter-item" style="margin-left: 10px">
              字段名称：
              <el-select
                v-model="props.queryParameters.fieldName"
                size="small"
                style="width: 120px"
                placeholder="请输入字段名称"
                clearable
                @clear="handlerClear"
              >
                <el-option
                  v-for="item in fieldNameOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div> -->
          </div>
        </template>
        <template #operation="props">
          <el-tooltip class="col-btn-icon" effect="dark" content="修改" placement="top">
            <el-button
              type="text"
              @click="handlerModify(props.rowInfo)"
              icon="el-icon-edit"
              style="font-size: 15px; color: #67c23a"
            ></el-button>
          </el-tooltip>
          <el-tooltip class="col-btn-icon" effect="dark" content="删除" placement="top">
            <el-button
              type="text"
              @click="handlerDelete(props.rowInfo)"
              icon="el-icon-delete"
              style="font-size: 15px; color: #f56c6c"
            ></el-button>
          </el-tooltip>
          <el-tooltip class="col-btn-icon" effect="dark" content="数据标准版本" placement="top">
            <el-button
              type="text"
              size="mini"
              icon="el-icon-s-management"
              @click="handlerFeatureVersionManage(props.rowInfo)"
              style="font-size: 15px; color: #409eff"
            >
            </el-button>
          </el-tooltip>
        </template>
      </resource-table>
    </div>
    <!-- 数据库信息窗口 -->
    <el-dialog
      :title="formDialogTitle"
      :center="true"
      :visible.sync="formDialogVisible"
      :close-on-click-modal="false"
      class="form-dialog"
      width="40%"
      height="40%"
    >
      <el-form :ref="refFormName" :model="form" :rules="formRules" label-width="120px">
        <el-form-item label-width="0">
          <el-col :span="12">
            <el-form-item label="图层编码" prop="code">
              <el-input v-model="form.code" placeholder="请输入图层编码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="图层名称" prop="cname">
              <el-input v-model="form.cname" placeholder="请输入图层名称"></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label-width="0">
          <el-col :span="12">
            <el-form-item label="图层年份" prop="year">
              <el-date-picker
                v-model="form.year"
                type="year"
                value-format="yyyy"
                placeholder="选择图层年份"
                class="form-item"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="空间参考" prop="spatialReference">
              <el-select
                v-model="form.spatialReference"
                placeholder="请选择空间参考"
                class="form-item"
              >
                <el-option
                  v-for="item in spatialReferenceOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label-width="0">
          <el-col :span="12">
            <el-form-item label="要素版本" prop="spatialReference">
              <el-select
                v-model="form.featureVersion"
                placeholder="请选择要素版本"
                class="form-item"
              >
                <el-option
                  v-for="item in featureVersionOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据源" prop="database">
              <el-select v-model="form.database" placeholder="请选择数据源" class="form-item">
                <el-option
                  v-for="item in databaseOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="是否是最新数据" prop="isLatest">
          <el-radio-group v-model="form.isLatest">
            <el-radio label="是"></el-radio>
            <el-radio label="否"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="desc">
          <el-input
            v-model="form.desc"
            type="textarea"
            placeholder="请输入备注"
            :rows="4"
          ></el-input>
        </el-form-item>
        <el-form-item label-width="0">
          <div style="width: 100%; text-align: center">
            <el-button type="primary" @click="handlerSubmit(refFormName)">确定</el-button>
            <el-button @click="handlerCancel(refFormName)">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import * as moment from 'moment';
import waves from '@/directive/waves';
// import { apiToolApplyListByPage, apiApplyTools, apiApprove } from '@/api/Tools/ToolsApplyList';

export default {
  name: 'FeatureVersion',
  components: {},
  directives: {
    
    waves,
  },
  data() {
    return {
      // 表格这遮罩
      ifLoading: false,
      // 业务分组
      businessTypeOptions: [
        {
          label: '常规监测',
          value: 'CGJC',
        },
        {
          label: '督察执法',
          value: 'DCZF',
        },
        {
          label: '用地审批',
          value: 'YDSP',
        },
        {
          label: '现状调查',
          value: 'XZDC',
        },
      ],
      // 要素名称
      featureNameOptions: [
        {
          label: '常规监测图斑',
          value: 'CGJCTB',
          pId: 'CGJC',
        },
        {
          label: '卫片执法国家下发图斑',
          value: 'WPZF_GJXFTB',
          pId: 'DCZF',
        },
        {
          label: '中间征地',
          value: 'TDZS_ZJK',
          pId: 'YDSP',
        },
        {
          label: '成果征地',
          value: 'TDZS_CGK',
          pId: 'YDSP',
        },
        {
          label: '地类图斑',
          value: 'DLTB',
          pId: 'XZDC',
        },
      ],
      // 要素版本
      featureVersionOptions: [
        {
          label: '地类图斑二调版',
          value: 'DLTB1',
          pId: 'DLTB',
        },
        {
          label: '卫片执法国家下发图斑',
          value: 'WPZF_GJXFTB1',
          pId: 'WPZF_GJXFTB',
        },
        {
          label: '中间征地',
          value: 'TDZS_ZJK1',
          pId: 'TDZS_ZJK',
        },
        {
          label: '成果征地',
          value: 'TDZS_CGK1',
          pId: 'TDZS_CGK',
        },
      ],
      // 字段名称
      fieldNameOptions: [
        {
          label: '标识码',
          value: 'bsm',
        },
        {
          label: '地类编码',
          value: 'dlbm',
        },
        {
          label: '地类名称',
          value: 'dlmc',
        },
        {
          label: '图斑面积',
          value: 'tbmj',
        },
      ],
      // 空间参考
      spatialReferenceOptions: [
        {
          label: '国家2000地理坐标系 - 4490',
          value: 4490,
        },
        {
          label: '国家2000高斯克吕格第36度带投影坐标系 - 4496',
          value: 4496,
        },
      ],
      // 数据库
      databaseOptions: [
        {
          label: '专用库-现状层',
          value: 'zyk_db_xzc',
        },
        {
          label: '专用库-覆盖层层',
          value: 'zyk_db_fgc',
        },
        {
          label: '专用库-管理层',
          value: 'zyk_db_glc',
        },
      ],
      // 版本迭代
      dataLayerHistoryOptions: [
        {
          label: '最新数据图层',
          value: 'LATEST_LAYER',
        },
        {
          label: '所有数据图层',
          value: 'ALL_LAYER',
        },
      ],
      // 表格列配置
      tableColumns: [
        // {
        //   key: 0,
        //   prop: 'id',
        //   align: 'center',
        //   label: '唯一标识',
        //   width: '160',
        // },
        {
          key: 1,
          prop: 'code',
          align: 'center',
          label: '图层编码',
          width: '180',
        },
        {
          key: 2,
          prop: 'cname',
          align: 'center',
          label: '图层名称',
          minWidth: '160',
        },
        {
          key: 3,
          prop: 'year',
          align: 'center',
          label: '图层年份',
          width: '100',
        },
        {
          key: 4,
          prop: 'spatialReference',
          align: 'center',
          label: '空间参考',
          width: '100',
        },
        {
          key: 5,
          prop: 'businessType',
          align: 'center',
          label: '业务分组',
          width: '120',
        },
        {
          key: 6,
          prop: 'featureName',
          align: 'center',
          label: '要素名称',
          width: '120',
        },
        {
          key: 7,
          prop: 'featureVersion',
          align: 'center',
          label: '版本名称',
          width: '160',
        },
        {
          key: 8,
          prop: 'database',
          align: 'center',
          label: '所在数据库',
          width: '160',
        },
        {
          key: 9,
          prop: 'desc',
          align: 'center',
          label: '备注',
          minWidth: '200',
        },
      ],
      // 表格数据
      tableData: [],
      // 表单ref
      refFormName: 'dbForm',
      // 表单标题
      formDialogTitle: '',
      // 表单显隐
      formDialogVisible: false,
      // 表单数据
      form: {
        id: null,
        code: '',
        cname: '',
        year: '',
        spatialReference: null,
        featureVersion: '',
        database: '',
        isLatest: '否',
        desc: '',
      },
      // 表单校验规则
      formRules: {
        code: [{ required: true, message: '请输入图层编码', trigger: 'blur' }],
        cname: [{ required: true, message: '请输入图层中文名称', trigger: 'blur' }],
        year: [{ required: true, message: '请选择数据图层年份', trigger: 'blur' }],
        spatialReference: [{ required: true, message: '请选择图层空间参考', trigger: 'blur' }],
        featureVersion: [{ required: true, message: '请选择要素标准版本', trigger: 'blur' }],
        database: [{ required: true, message: '请选择图层数据源', trigger: 'blur' }],
        isLatest: [{ required: true, message: '请选择是否是最新数据图层', trigger: 'change' }],
      },
    };
  },
  mounted() {},
  methods: {
    /**
     * 获取表格数据
     */
    getList(queryParameters, callback) {
      const vm = this;
      // const { name, timeRange, pageSize, page } = queryParameters;
      // let startTime = null;
      // let endTime = null;
      // if (timeRange && timeRange.length === 2) {
      //   startTime = moment(timeRange[0]).format('YYYY-MM-DD HH:mm:ss');
      //   endTime = moment(timeRange[1]).format('YYYY-MM-DD HH:mm:ss');
      // }
      vm.ifLoading = true;
      const timer = setTimeout(() => {
        clearTimeout(timer);
        // MockData
        const mockData = [
          {
            id: 'dsad-ewrw-vvsd-rtra5',
            code: 'BGDC_DLTB_GJXFB_2021',
            cname: '变更调查_地类图斑_国家下发版_2021',
            year: '2021',
            spatialReference: 4490,
            businessType: '现状调查',
            featureName: '地类图斑',
            featureVersion: '地类图斑三调版',
            database: 'zyk_db_xzc',
            isLatest: '是',
            desc: '',
          },
          {
            id: 'dsad-ewrw-vvsd-rtra1',
            code: 'SD_DLTB_2020',
            cname: '三调_地类图斑_2020变更调查基础库',
            year: '2020',
            spatialReference: 4490,
            businessType: '现状调查',
            featureName: '地类图斑',
            featureVersion: '地类图斑三调版',
            database: 'zyk_db_xzc',
            isLatest: '否',
            desc: '',
          },
          {
            id: 'dsad-ewrw-vvsd-rtra2',
            code: 'DLTB_2016',
            cname: '变更调查2016',
            year: '2016',
            spatialReference: 4490,
            businessType: '现状调查',
            featureName: '地类图斑',
            featureVersion: '地类图斑三调版',
            database: 'zyk_db_xzc',
            isLatest: '否',
            desc: '',
          },
          {
            id: 'dsad-ewrw-vvsd-rtra3',
            code: 'DLTB_2015',
            cname: '变更调查2015',
            year: '2015',
            spatialReference: 4490,
            businessType: '现状调查',
            featureName: '地类图斑',
            featureVersion: '地类图斑三调版',
            database: 'zyk_db_xzc',
            isLatest: '否',
            desc: '',
          },
          {
            id: 'dsad-ewrw-vvsd-rtra4',
            code: 'DLTB_2009',
            cname: '变更调查2009',
            year: '2009',
            spatialReference: 4490,
            businessType: '现状调查',
            featureName: '地类图斑',
            featureVersion: '地类图斑二调版',
            database: 'zyk_db_xzc',
            isLatest: '否',
            desc: '',
          },
        ];
        vm.ifLoading = false;
        callback({
          items: mockData,
          total: mockData.length,
        });
      }, 1000);

      // 对接接口
      // apiToolApplyListByPage({
      //   name: name,
      //   startTime,
      //   endTime,
      //   page,
      //   pageSize,
      //   statusList: ['1'],
      // })
      //   .then((res) => {
      //     if (res.status === 'success') {
      //       vm.ifLoading = false;
      //       const {
      //         data: { items },
      //       } = res;
      //       const newItems = items.map((item) => {
      //         // const { applicant, creatTime, id, purpose } = item;
      //         // return {
      //         //   id,
      //         //   create_time: creatTime,
      //         //   approval_purpose: purpose,
      //         //   applicant_name: applicant.name,
      //         //   applicant_phone: applicant.mobile,
      //         // };

      //         const {
      //           // applicant: { company, identity, region, address },
      //           // address,
      //           // company,
      //           // identity,
      //           // region,
      //           applicantName,
      //           applicantPhone,
      //           creatTime,
      //           id,
      //           purpose,
      //           // resourceCount,
      //           // status,
      //         } = item;
      //         return {
      //           id,
      //           create_time: creatTime,
      //           approval_purpose: purpose,
      //           applicant_name: applicantName,
      //           applicant_phone: applicantPhone,
      //         };
      //       });
      //       res.data.items = newItems;
      //       callback(res.data);
      //     } else {
      //       vm.$message({
      //         type: 'error',
      //         message: res.message,
      //       });
      //     }
      //   })
      //   .catch((err) => {
      //     throw new Error(err);
      //   });
    },
    /**
     * 查询
     */
    handlerQuery() {
      const vm = this;
      const refResourceTable = vm.getRefDom('refResourceTable');
      if (refResourceTable) {
        refResourceTable.queryTable();
      }
    },
    /**
     * 添加数据
     */
    handlerAddNew() {
      const vm = this;
      vm.formDialogTitle = '新增数据图层信息';
      vm.resetFormFields();
      vm.formDialogVisible = true;
    },
    /**
     * 修改数据
     */
    handlerModify(row) {
      const vm = this;
      vm.formDialogTitle = '修改数据图层信息';
      vm.resetFormFields();
      vm.form = row;
      vm.formDialogVisible = true;
    },
    /**
     * 删除数据
     */
    handlerDelete() {
      const vm = this;
      vm.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          vm.$message({
            type: 'success',
            message: '删除成功!',
          });
        })
        .catch(() => {
          vm.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
    /**
     * 取消提交
     */
    handlerCancel() {
      const vm = this;
      vm.dialogClose();
    },
    /**
     * 提交审批信息
     */
    handlerSubmit(formName) {
      const vm = this;
      vm.$refs[formName].validate((valid) => {
        if (valid) {
          const { id } = vm.form;
          if (id === null) {
            // 新增
            vm.$message.success('新增成功');
            vm.dialogClose();
            return;
          }
          // 修改
          vm.$message.success('修改成功');
          vm.dialogClose();

          // if (status === '' || approval_opinion === '') {
          //   vm.$message.error('请填写审批意见并审批');
          //   return;
          // }

          // apiApprove({
          //   approvalIds: [id],
          //   status,
          //   opinion: approval_opinion,
          // })
          //   .then((res) => {
          //     const { status, message } = res;
          //     if (status === 'success') {
          //       vm.$message.success('审批意见已提交');

          //       vm.handlerQuery();
          //     } else {
          //       vm.$message.error(message);
          //     }
          //   })
          //   .catch((err) => {
          //     console.error(err);
          //   });
        } else {
          vm.$message.error('请正确填写表单项');
          return false;
        }
      });
    },
    /**
     * 检索条件清空
     */
    handlerClear() {
      const vm = this;
      vm.handlerQuery();
    },
    /**
     * 弹窗关闭
     */
    dialogClose() {
      const vm = this;
      vm.resetFormFields();
      vm.formDialogVisible = false;
      vm.handlerQuery();
    },
    /**
     * 根据ref获取dom元素
     */
    getRefDom(refName) {
      const vm = this;
      return vm.$refs[refName];
    },
    /**
     * 重置表单字段并清空非法校验
     */
    resetFormFields() {
      const vm = this;
      const elForm = vm.$refs[vm.refFormName];
      if (elForm) {
        elForm.resetFields();
      }
    },
    /**
     * 数据标准版本
     */
    handlerFeatureVersionManage(row) {
      const vm = this;
      vm.$router.push({ path: `/data-standard/feature-version`, params: { db: '234' } });
    },
  },
};
</script>

<style lang="scss" scoped>
.feature-version__container {
  height: calc(100vh - 85px);
  overflow: hidden;
  background-color: #f2f2f2;
  .content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 1);
    padding: 15px;
    display: flex;
    flex: 1;
    flex-direction: column;
    .panel-header {
      height: 40px;
    }
    .panel-content {
      flex: 1;
      height: calc(100% - 80px);
      padding: 12px 0;
    }
    .panel-footer {
      height: 40px;
    }
  }

  .search-conditions {
    display: flex;
    flex-direction: column;
    font-size: small;
    .condition-item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      .item-label {
        width: 206px;
        text-align: right;
        padding-right: 10px;
      }
      .item-value {
        flex: 1;
      }
    }
  }

  .search-func {
    padding: 0px 10px;
    .btn-query {
      display: inline-block;
      width: 50%;
      padding-right: 10px;
    }
    .btn-reset {
      display: inline-block;
      width: 50%;
      padding-left: 10px;
    }
  }

  .panel-header {
    .table-func {
      width: 28%;
      .table-func-btn {
        display: inline-block;
        padding: 0px 10px;
        width: 25%;
      }
      .btn-add {
        padding-left: 0px;
      }
    }
  }

  .panel-content {
    ::v-deep .table-head-cell-style {
      text-align: center !important;
      color: rgba(100, 100, 100);
    }
    ::v-deep .table-head-cell-style {
      color: rgb(0, 0, 0);
      background: rgb(215, 215, 215);
    }
  }

  .panel-footer {
    display: flex;
    align-items: flex-end;
  }

  .btn-action {
    width: 100%;
    .btn-modify {
      display: inline-block;
      width: 50%;
      padding: 0px 10px;
    }
    .btn-approval {
      display: inline-block;
      width: 50%;
      padding: 0px 10px;
    }
  }

  // 临时
  .table-panel {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 1);
    // padding: 15px 10px;
  }

  .form-dialog {
    ::v-deep .el-dialog__header {
      text-align: center;
    }
    ::v-deep .el-dialog__body {
      padding: 20px !important;
      padding-top: 5px !important;
    }
    ::v-deep .normal-table-header-cell {
      color: rgb(0, 0, 0);
      background: rgb(215, 215, 215);
      font-weight: bold;
    }
  }

  ::v-deep .normal-table-header-cell {
    color: rgb(0, 0, 0);
    background: rgb(215, 215, 215);
    font-weight: bold;
  }

  .btn-list {
    .btn-item {
      display: inline-block;
      .el-button {
        // background: #169bd5;
        // border-color: #169bd5;
      }
    }
  }
  ::v-deep .header-search-button {
    // background: #169bd5;
    // border-color: #169bd5;
  }
  ::v-deep .col-btn-item {
    display: none;
  }
}

.form-dialog {
  .form-panel {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .approval-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    .approval-list-item {
      height: 40px;
      line-height: 40px;
      flex: 1;
      display: flex;
      .label {
        width: 13%;
        text-align: center;
      }
      .value {
        flex: 1;
      }
    }
    .permission-approval {
      height: 40px;
      line-height: 40px;
    }
  }
  .approval-action {
    height: 60px;
    line-height: 60px;
    text-align: center;
    .btn-submit {
      width: 150px;
      background: #169bd5;
      border-color: #169bd5;
    }
  }

  ::v-deep .el-dialog__body {
    padding-bottom: 10px;
  }
}

.filter-conditions {
  .filter-item {
    display: inline-block;
    .el-button {
      background: #169bd5;
      border-color: #169bd5;
    }
  }
}

.form-item {
  width: 100%;
}
</style>
